<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
    <title>问卷调查</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        html,
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            height: 100%;
            width: 100%;
            /* background-color: rgb(199, 150, 150); */
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body::before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background: url(/img/lrbody.jpeg) bottom right no-repeat;
            background-size: 100% 100%;
            z-index: -1;
            opacity: .8;

        }

        .el-tabs__nav-scroll {
            display: flex;
            justify-content: center;
        }

        .el-tabs {
            height: 400px;
        }

        #app {
            max-width: 400px;
            margin: auto;
            padding: 40px;
            border-radius: 4px;
        }

        header {
            text-align: center;
            color: white;
            font-size: 24px;
            font-weight: bold;
            padding: 10px;
        }

        .el-form-item {
            margin-bottom: 35px;
        }

        .el-form-item:nth-child(4) {
            margin-bottom: 10px;
        }

        .el-form-item__label {
            padding-left: 18px;
        }

        .btnclass {
            text-align: center;
        }

        .btnclass .el-button {
            width: 230px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>问卷调查</header>
        <el-tabs type="border-card">
            <el-tab-pane label="注册">
                <el-form :label-position="'left'" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                    label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名：" prop="user">
                        <el-input v-model="ruleForm.user"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="pass">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass"
                            @keyup.enter.native="submitRegister('ruleForm')" autocomplete="off"></el-input>
                    </el-form-item>
                    <div class="btnclass">
                        <el-button type="primary" @click="submitRegister('ruleForm')">提交</el-button>
                    </div>
                    <div class="btnclass">
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="登录">
                <el-form :label-position="'left'" :model="loginForm" status-icon :rules="rulesLogin" ref="loginForm"
                    label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名：" prop="user">
                        <el-input v-model="loginForm.user"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="pass">
                        <el-input type="password" v-model="loginForm.pass"
                            @keyup.native.enter="submitLogin('loginForm')" autocomplete="off"></el-input>
                    </el-form-item>

                    <div class="btnclass">
                        <el-button type="primary" @click="submitLogin('loginForm')">提交</el-button>
                    </div>
                    <div class="btnclass">
                        <el-button @click="resetForm('loginForm')">重置</el-button>
                    </div>
                </el-form>
            </el-tab-pane>

        </el-tabs>

    </div>


    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data() {
                var validateUser = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入用户名'))
                    } else if (value.lastIndexOf(' ') !== -1) {
                        callback(new Error('用户名不能是特殊字符'));
                    }
                    else {
                        callback();
                    }
                };
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else if (value.lastIndexOf(' ') !== -1) {
                        callback(new Error('密码不能是特殊字符'));
                    }
                    else if (value.length < 6) {
                        callback(new Error('密码长度必须六位'));
                    }
                    else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value.lastIndexOf(' ') !== -1) {
                        callback(new Error('确定密码不能是特殊字符'));
                    }
                    else if (value !== this.ruleForm.pass) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };

                return {
                    ruleForm: {
                        pass: '',
                        checkPass: '',
                        user: ''
                    },
                    rules: {
                        pass: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        checkPass: [
                            { validator: validatePass2, trigger: 'blur' }
                        ],
                        user: [
                            { validator: validateUser, trigger: 'blur' }
                        ]
                    },
                    loginForm: {
                        pass: '',
                        user: ''
                    },
                    rulesLogin: {
                        pass: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        user: [
                            { validator: validateUser, trigger: 'blur' }
                        ]
                    }

                }
            },
            methods: {
                submitRegister(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            // alert(JSON.stringify(this.ruleForm));
                            axios.post('/api/user/register', {
                                username: this.ruleForm.user,
                                password: this.ruleForm.pass,
                                confimpwd: this.ruleForm.checkPass
                            }).then(res => {
                                res = res.data;
                                if (res.code === 200) {
                                    this.$message({
                                        type: 'success',
                                        message: res.msg,
                                        center: true,
                                        duration: 2000
                                    })
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg,
                                        center: true,
                                        duration: 2000
                                    })

                                }
                            }).catch(err => {
                                console.log(err);
                            })

                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                submitLogin(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {


                            axios.post('/api/user/login', {
                                username: this.loginForm.user,
                                password: this.loginForm.pass
                            }).then(res => {
                                res = res.data;
                                console.log(res);

                                if (res.code === 200) {

                                    if (res.id === 1) {
                                        location.href = '/'
                                    } else {
                                        this.$message({
                                            type: 'success',
                                            message: '登录成功',
                                            center: true,
                                            duration: 1500
                                        })
                                        setTimeout(() => {
                                            location.href='/quest/springboard'
                                        }, 1500);
  
                                    }

                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: res.msg,
                                        center: true,
                                        duration: 2000
                                    })
                                }
                            }).catch(err => {
                                console.log(err);
                            })



                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        })
    </script>

</body>

</html>